<template>
  <div class="row justify-center container-row">
    <div class="col-8">
      <div class="row row-padding">
        <div class="left">
          <div class="title">Filter:</div>
          <div class="filter-by">
            <aplusmax-select-btn></aplusmax-select-btn>
            <div style="width: 150px;height: 100%">
              <q-select color="grey" outlined v-model="model" :options="options" :dense="dense" :options-dense="denseOpts" label="material" bg-color="#989898" transition-show="jump-up"
                        transition-hide="jump-up" >
              </q-select>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">Sort by:</div>
          <div style="width: 300px;height: 100%">
            <q-select color="grey" outlined v-model="model" :options="options" :dense="dense" :options-dense="denseOpts" bg-color="#989898" transition-show="jump-up"
                      transition-hide="jump-up" >
            </q-select>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref} from 'vue'

const dense = ref(false)
const denseOpts = ref(false)
defineProps({})

const emit = defineEmits([])

const model = ref(null)
const options = [
  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]
defineExpose({})
</script>

<style scoped lang='less'>
.row-padding{
  padding: 0 50px;
  .right{
    margin-left: auto;
  }
  .title{
    margin-bottom: 15px;
  }
  .filter-by{
    display: flex;
  }
}
</style>